<!--
 * @Author: weikang
 * @Description: 
 * @Date: 2023-12-19 09:39:40
 * @LastEditTime: 2023-12-21 20:07:56
 * @FilePath: \lianyungang-dashborad\src\model\map.vue
-->
<template>
  <div class="model-panel">
    <div id="map"></div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  var map = new AMap.Map("map", {
    resizeEnable: true, //是否监控地图容器尺寸变化
    zoom: 12,
    mapStyle: "amap://styles/blue", //地图的皮肤 darkblue
    center: [119.301884, 34.716236],
    //viewMode: '3D'//使用3D视图
  });
  addMask();
  // 添加遮罩
  function addMask() {
    //axios.get("https://geo.datav.aliyun.com/areas_v3/bound/320700.json").then((geojson) => {
    //    let outer = [
    //        new AMap.LngLat(-360, 90, true),
    //        new AMap.LngLat(-360, -90, true),
    //        new AMap.LngLat(360, -90, true),
    //        new AMap.LngLat(360, 90, true),
    //    ];
    //    console.log(geojson)
    //    let pathArray = [
    //        outer, //外边界
    //        geojson, //内边界需要遮罩区域
    //    ];
    //    var polygon = new AMap.Polygon({
    //        pathL: pathArray,
    //        strokeColor: '#04082b',//线颜色
    //        strokeWeight: 1,
    //        strokeOpacity: 0.4,//线透明度
    //        fillOpacity: 0.5,//填充透明度
    //        fillColor: '#155292',//填充颜色
    //    });
    //    polygon.setPath(pathArray);
    //    map.add(polygon);
    //    //map.setFitView([polygon]) //将覆盖物调整到合适视野
    //});

    ajax("https://www.sparkgs.com/data.json", function (err, geoJSON) {
      if (!err) {
        var geojson = new AMap.GeoJSON({
          geoJSON: geoJSON,
          // 还可以自定义getMarker和getPolyline
          getPolygon: function (geojson, lnglats) {
            // 计算面积
            var area = AMap.GeometryUtil.ringArea(lnglats[0]);

            return new AMap.Polygon({
              path: lnglats,
              strokeColor: "#ffffff", //线颜色
              strokeWeight: 3,
              strokeOpacity: 0.8, //线透明度
              fillOpacity: 0.1, //填充透明度
              fillColor: "#ffffff", //填充颜色
            });
          },
        });
        map.add(geojson);
      } else {
      }
    });
  }
  //map.setMapStyle('amap://styles/darkblue');
  var citys = [
    {
      title: "连云港云邸项目工程(1#楼-13#楼、15#楼保障房、16#楼、西地下室）",
      lng: "119.301884",
      lat: "34.716236",
      icon: "red.png",
    },
    {
      title: "环保装备产业园（一期）-办公楼、研发楼、车间1",
      lng: "119.301884",
      lat: "34.686236",
      icon: "org.png",
    },
    {
      title: "美多利科技创业园配套设施（员工宿舍）3#楼项目工程施工",
      lng: "119.29625",
      lat: "34.714028",
      icon: "yel.png",
    },
    {
      title: "连云港市中小企业创新创 业孵化中心建设项目土建及安装工程施工",
      lng: "119.243542",
      lat: "34.687118",
      icon: "red.png",
    },
    {
      title: "天誉未来城一期1#-6#楼及地库总承包施工",
      lng: "119.253076",
      lat: "34.720408",
      icon: "org.png",
    },
    {
      title: "半岛铭筑",
      lng: "119.240916",
      lat: "34.686753",
      icon: "yel.png",
    },
    {
      title: "盐坨里项目工程总承包EPC",
      lng: "119.233743",
      lat: "34.691056",
      icon: "red.png",
    },
    {
      title: "平湖里项目总承包（EPC）",
      lng: "119.265359",
      lat: "34.701325",
      icon: "yel.png",
    },
  ];

  //var flashMarkerLayer = new FlashMarker(map, citys);
  //实例化信息窗体

  citys.forEach(function (item, i) {
    var marker = new AMap.Marker({
      icon: item.icon,
      position: [item.lng, item.lat],
    });
    marker.setMap(map);
    marker.on("mousemove", function (e) {
      // 处理鼠标移动事件
      //构建信息窗体中显示的内容
      var info = [];
      info.push("<div class='input-card content-window-card'><div></div> ");
      info.push(
        '<div style="padding:7px 0px 0px 0px;"><h4>' + item.title + "</h4>"
      );
      info.push("<p class='input-item'></p>");
      info.push("<p class='input-item'>地址 :</p></div></div>");
      infoWindow = new AMap.InfoWindow({
        content: info.join(""), //使用默认信息窗体框样式，显示信息内容
        offset: new AMap.Pixel(16, 10),
      });
      infoWindow.open(map, marker.getPosition());
    });
  });


  //实例化信息窗体

  var infoWindow = new AMap.InfoWindow({
    isCustom: true, //使用自定义窗体
    content: createInfoWindow(
      "城发置业新建320519213101号地",
      "未办理施工许可证"
    ),
    offset: new AMap.Pixel(16, -45),
  });

  infoWindow.open(map, [119.392269,34.717483]);

  //构建自定义信息窗体
  function createInfoWindow(title, xuke) {
    map.clearInfoWindow();
    var info = document.createElement("div");
    info.className = "custom-info input-card content-window-card";
    // 定义顶部标题
    var top = document.createElement("div");
    var titleD = document.createElement("div");
    top.className = "info-top";
    titleD.innerHTML = title;

    top.appendChild(titleD);
    info.appendChild(top);

    // 定义中部内容
    var middle = document.createElement("div");
    middle.className = "info-middle";
    middle.style.backgroundColor = "white";
    info.appendChild(middle);

    // 定义底部内容
    var bottom = document.createElement("div");
    bottom.className = "info-bottom";
    bottom.innerHTML = xuke;
    info.appendChild(bottom);
    return info;
  }

  //关闭信息窗体
  function closeInfoWindow() {
    map.clearInfoWindow();
  }
});
</script>

<style lang="scss" scoped>
.model-panel {
  height: 587px;
}
#map {
  height: 100%;
  margin: 0px;
  font: 12px Helvetica, "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑", Arial;
}

.amap-logo {
  display: none;
}

.amap-copyright {
  opacity: 0;
}

.custom-input-card {
  width: 18rem;
}

.custom-input-card .btn:last-child {
  margin-left: 1rem;
}
</style>

<style>
.content-window-card {
  position: relative;
  width: 280px;
  padding: 12px;
  box-shadow: none;
  bottom: 0;
  left: 0;
  background: url("/src/assets/info.png") no-repeat;
  background-size: 100% 100%;

  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  line-height: 20px;
}
.info-middle {
  height: 1px;
  margin: 12px 0;
}

.content-window-card p {
  height: 2rem;
}
</style>